<template>
	<form class="bookedit">
		<el-container>
			<el-header>
				<h3>商品添加...</h3>
			</el-header>
			<el-main>
				<p>
					<label>商品名称</label>
					<el-input v-model="book.name" />
				</p>
				<p>
					<label>商品序号</label>
					<el-input v-model="book.sn" />
				</p>
				<p>
					<label>商品价格</label>
					<el-input v-model="book.price" />
				</p>
				<p>
					<label>商品厂商</label>
					<el-input v-model="book.author" />
				</p>
				<p>
					<label>商品出处</label>
					<el-input v-model="book.publisher" />
				</p>
				<p>
					<label>出厂时间</label>
					<el-date-picker type="datetime" v-model="book.tpublish" placeholder="选择时间"/>
				</p>
				<p>
					<label>商品类型</label>
					<!-- <select v-model="bookType">
						<option v-for="it in typelist" :key="it.id">{{it.type}}</option>
					</select> -->
					<el-cascader v-model="value" :options="arr">
						<template #default="{data}">{{data.type}}</template>
					</el-cascader>
				</p>
				<p>
					<img :src="`${$Imgurl}/showImg/${picture}`"/>
					<input type="file" ref="book.picture"/>
				</p>
				<p>
					<router-link to="/admin/books">返回列表</router-link>
					<input type="button" value="上传" @click="add()"/>
				</p>
			</el-main>
		</el-container>
	</form>
</template>

<script>
	export default{
		name:'Bookedit',
		data(){
			return{
				typelist:[],
				arr:[],
				author:'',
				value: [],
				book:{
					id:'',
					name:'',
					picture:'',
					price:0,
					publisher:'',
					sn:'',
					tpublish:'',
					bookType:{
						id:'',
						type:''
					},
				}
			}
		},
		created() {
			this.axios.get('/api/public/type/findAll2').then((res)=>{
				if (res.status==200) {
					this.typelist=res.data.databook.
					this.getarr(0,this.arr)
					console.log(this.arr)
				}
			}).catch((error)=>{
				console.log(error)
			})
			if (this.$route.query.bookid==0) {
				this.author='',
				this.bookType={},
				this.name='',
				this.picture='',
				this.price=0,
				this.publisher='',
				this.sn='',
				this.tpublish=new Date().getTime()
			} else{
				this.axios.get(`/api/adm/book/findById/${this.$route.query.bookid}`).then((res)=>{
					if (res.data.code==200) {
						this.author=res.data.data.author,
						this.bookType=res.data.data.bookType,
						this.name=res.data.data.name,
						this.price=res.data.data.price,
						this.publisher=res.data.data.publisher,
						this.sn=res.data.data.sn,
						this.tpublish=res.data.data.tpublish
					}
				}).catch((error)=>{
					console.log(error)
				})
			}
		},
		methods:{
			add(){
				//上传的value是files
				let fs=this.$refs.picture.files
				if (fs.length>0&&fs[0]!='' && this.author!=''&&this.bookType!={}&&this.name!=''&&this.price!=''&&this.publisher!=''&&this.sn!=''&&this.tpublish) {//判断是否有上传图片
					//创建空的表单对象数据
					let fd=new FormData()
					//将需要打包的数据，
					fd.append('author',this.author)
					fd.append('bookType',this.bookType)
					fd.append('name',this.name)
					fd.append('picture',fs[0])
					fd.append('price',this.price)
					fd.append('publisher',this.publisher)
					fd.append('sn',this.sn)
					fd.append('tpublish',this.tpublish)
					
					this.axios.post('/api/adm/book/addBook',fd,{
						header:{'Content-Type':'multipart/form-data'}
					}).then((res)=>{
						if (res.data.code==200) {
							this.$router.push('/admin/Books')
						}else{
							alert(res.data.msg)
						}
					}).catch((error)=>{
						console.log(error)
					})
				}
			},
			getarr(id,arr){
				if (id==0) {
					this.typelist.forEach(it=>{
						if (it.pid==0) {
							arr.push(it)
						}
					})
					this.getarr(this.arr[0].id,this.arr)
				} else{
					arr.forEach((it,i)=>{
						this.typelist.forEach((val,key)=>{
							if (it.id==val.pid) {
								if(!it.children) it.children=[]
								it.children.push(val)
							}
						})
						if (it.children) {
							this.getarr(1,it.children)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.bookedit{
		width: 100%;
	}
	.bookedit h3{
		font-size: 23px;
		line-height: 50px;
	}
	.bookedit p{
		width: 100%;
		height: 60px;
		display: flex;
		align-items: center;
		padding-left: 10px;
	}
	.bookedit p label{
		font-size: 18px;
		padding-right: 10px;
		width: 7%;
	}
	.bookedit p input{
		line-height: 30px;
		width: 50%;
	}
	.bookedit p img{
		width: 80px;
		height: 60px;
		border: 1px solid black;
		margin-right: 20px;
	}
	.bookedit p select{
		width: 50%;
		height: 40px;
	}
	.bookedit p:last-child{
		width: 90%;
		border-top: 1px solid gainsboro;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;
	}
	.bookedit p:last-child input{
		width: 100px;
		height: 30px;
	}
</style>
